<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="title">
  <h2>Client Registration</h2>
</div>

<form [formGroup]="applicationForm" autocomplete="off" *ngIf="!isLoadingData">
  <mat-card class="client-registration-providers__card">
    <mat-card-content>
      <h3>Default application type</h3>
      <div formGroupName="types">
        <gio-form-slide-toggle
          class="client-registration-providers__card__type__toggle"
          formGroupName="simple"
          [matTooltip]="disabledMessage"
          [matTooltipDisabled]="!this.applicationForm.get('types.simple.enabled').disabled"
        >
          <gio-form-label>Simple</gio-form-label>
          A hands-free application. Using this type, you will be able to define the client_id by your own
          <mat-slide-toggle
            data-testid="typesSimpleEnabled"
            gioFormSlideToggle
            formControlName="enabled"
            aria-label="Simple (A hands-free application. Using this type, you will be able to define the client_id by your own)"
          ></mat-slide-toggle>
        </gio-form-slide-toggle>
      </div>
    </mat-card-content>
  </mat-card>
</form>

<mat-card class="client-registration-providers__card">
  <mat-card-content>
    <div class="client-registration-providers__card__title">
      <h3>Dynamic Client Registration (DCR) for applications</h3>
      <span>
        Client registration providers allows to plug any authorization server compliant with the
        <a href="https://openid.net/specs/openid-connect-registration-1_0.html" target="_blank" rel="noopener noreferrer"
          >OpenID Connect Dynamic Client Registration</a
        >.
        <br />
        By defining this DCR (Dynamic Client Registration) provider it allows to associate auto-magically an OAuth client to an application
        and apply security best practices according to the application type you choose.
      </span>
    </div>

    <form [formGroup]="applicationForm" autocomplete="off" *ngIf="!isLoadingData">
      <gio-form-slide-toggle
        class="client-registration-providers__card__toggle"
        formGroupName="registration"
        [matTooltip]="disabledMessage"
        [matTooltipDisabled]="!this.applicationForm.get('registration.enabled').disabled"
      >
        <gio-form-label> Enable Dynamic Client Registration</gio-form-label>

        <mat-slide-toggle
          data-testid="registrationEnabled"
          gioFormSlideToggle
          formControlName="enabled"
          aria-label="Client registration for applications (OpenID Connect - Dynamic Client Registration)"
        ></mat-slide-toggle>
      </gio-form-slide-toggle>
      <mat-divider></mat-divider>

      <div formGroupName="types" class="client-registration-providers__card__type">
        <h5>Allowed application types</h5>
        <gio-form-slide-toggle
          class="client-registration-providers__card__type__toggle"
          formGroupName="browser"
          [matTooltip]="disabledMessage"
          [matTooltipDisabled]="!this.applicationForm.get('types.browser.enabled').disabled"
        >
          <gio-form-label>Browser</gio-form-label>
          Angular, React, ...
          <mat-slide-toggle
            data-testid="typesBrowserEnabled"
            gioFormSlideToggle
            formControlName="enabled"
            aria-label="Browser (Angular, React, ...)"
          ></mat-slide-toggle>
        </gio-form-slide-toggle>

        <gio-form-slide-toggle
          class="client-registration-providers__card__type__toggle"
          formGroupName="web"
          [matTooltip]="disabledMessage"
          [matTooltipDisabled]="!this.applicationForm.get('types.web.enabled').disabled"
        >
          <gio-form-label>Web</gio-form-label>
          Java, .Net, ...
          <mat-slide-toggle
            data-testid="typesWebEnabled"
            gioFormSlideToggle
            formControlName="enabled"
            aria-label="Web (Java, .Net, ...)"
          ></mat-slide-toggle>
        </gio-form-slide-toggle>

        <gio-form-slide-toggle
          class="client-registration-providers__card__type__toggle"
          formGroupName="native"
          [matTooltip]="disabledMessage"
          [matTooltipDisabled]="!this.applicationForm.get('types.native.enabled').disabled"
        >
          <gio-form-label>Native</gio-form-label>
          iOS, Android, ...
          <mat-slide-toggle
            data-testid="typesNativeEnabled"
            gioFormSlideToggle
            formControlName="enabled"
            aria-label="Native (iOS, Android, ...)"
          ></mat-slide-toggle>
        </gio-form-slide-toggle>

        <gio-form-slide-toggle
          class="client-registration-providers__card__type__toggle"
          formGroupName="backend_to_backend"
          [matTooltip]="disabledMessage"
          [matTooltipDisabled]="!this.applicationForm.get('types.backend_to_backend.enabled').disabled"
        >
          <gio-form-label>Backend-to-Backend</gio-form-label>
          <mat-slide-toggle
            data-testid="typesBackendToBackendEnabled"
            gioFormSlideToggle
            formControlName="enabled"
            aria-label="Backend-to-Backend"
          ></mat-slide-toggle>
        </gio-form-slide-toggle>
      </div>
    </form>

    <h5>Providers configuration</h5>
    <div class="client-registration-providers__card__add-btn">
      <div
        *gioPermission="{ anyOf: ['environment-client_registration_provider-c'] }"
        [gioLicense]="dcrRegistrationLicenseOptions"
        matTooltip="Only one DCR provider is allowed."
        [matTooltipDisabled]="providersTableDS.length < 1"
      >
        <button type="button" mat-raised-button color="primary" (click)="onAddProvider()" [disabled]="providersTableDS.length >= 1">
          <mat-icon svgIcon="gio:plus"></mat-icon>Add a provider
          <mat-icon *ngIf="hasDcrRegistrationLock$ | async" iconPositionEnd svgIcon="gio:lock"></mat-icon>
        </button>
      </div>
    </div>
    <table
      mat-table
      matSort
      [dataSource]="providersTableDS"
      class="client-registration-providers__card__table"
      id="providersTable"
      aria-label="Providers table"
    >
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef id="name">Name</th>
        <td mat-cell *matCellDef="let element">
          <span>
            {{ element.name }}
          </span>
        </td>
      </ng-container>

      <!-- Description Column -->
      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef id="description">Description</th>
        <td mat-cell *matCellDef="let element">
          <span>
            {{ element.description }}
          </span>
        </td>
      </ng-container>

      <!-- updatedAt Column -->
      <ng-container matColumnDef="updatedAt">
        <th mat-header-cell *matHeaderCellDef id="updatedAt">Last updated at</th>
        <td mat-cell *matCellDef="let element">
          <span>
            {{ element.updatedAt | date: 'medium' }}
          </span>
        </td>
      </ng-container>

      <!-- Actions Column -->
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef id="actions"></th>
        <td mat-cell *matCellDef="let element">
          <div class="actions">
            <button
              (click)="onEditActionClicked(element)"
              mat-icon-button
              aria-label="Button to edit a provider"
              matTooltip="Edit provider"
            >
              <mat-icon svgIcon="gio:edit-pencil"></mat-icon>
            </button>
            <button
              *gioPermission="{ anyOf: ['environment-client_registration_provider-d'] }"
              (click)="onRemoveActionClicked(element)"
              mat-icon-button
              aria-label="Button to remove a provider"
              matTooltip="Remove provider"
            >
              <mat-icon svgIcon="gio:trash"></mat-icon>
            </button>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

      <!-- Row shown when there is no data -->
      <tr class="mat-mdc-row mdc-data-table__row" *matNoDataRow>
        <td
          *ngIf="!isLoadingData && providersTableDS.length === 0"
          class="mat-mdc-cell mdc-data-table__cell"
          [attr.colspan]="displayedColumns.length"
        >
          {{ 'No DCR provider configured.' }}
        </td>
        <td *ngIf="isLoadingData" class="mat-mdc-cell mdc-data-table__cell" [attr.colspan]="displayedColumns.length">
          {{ 'Loading...' }}
        </td>
      </tr>
    </table>
  </mat-card-content>
</mat-card>
